<!--
 * @Description: -
 * @Author: sanghx
 * @Date: 2019-12-06 10:59:07
 * @LastEditors: sanghx
 * @LastEditTime: 2019-12-06 11:23:29
 -->
<template>
  <view>
    <view
      class="wx_add_tips_box"
      v-if="showTips"
    >
      <view
        class='wx_add_tips_content'
        @tap='hideTips'
      >
        <div class="x"><img src="/static/img/x.png" alt="" srcset=""> </div>
        <div class="title">{{title}}</div>
        <div class="subtitle">{{subtitle}}</div>
      </view>
    </view>
  </view>
</template>

<script>
const SHOW_TIPS = 'SHOW_TIPS'
export default {
  props: {
    title: {
      type: String,
      default: '点击这里「添加到我的小程序」',
      required: true
    },
    subtitle: {
      type: String,
      default: '添加后在微信首页下拉,快速进入小程序',
      required: true
    },
    duration: {
      type: Number,
      default: 5,
      required: false
    }
  },
  data () {
    return {
      showTips: false
    }
  },
  mounted () {
    this.showTips = !wx.getStorageInfoSync().keys.includes(SHOW_TIPS)
    setTimeout(() => {
      this.showTips = false
      wx.setStorageSync(SHOW_TIPS, true)
    }, this.duration * 1000)
  },
  methods: {
    hideTips () {
      wx.setStorageSync(SHOW_TIPS, true)
      this.showTips = false
    }
  }
}
</script>

<style lang="less">
.wx_add_tips_box {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  width: 600rpx;
}
.wx_add_tips_content {
  border-width: 0rpx;
  margin-top: 20rpx;
  position: relative;
  background-color: #ffffff;
  box-shadow:0px 8px 16px 0px rgba(0,0,0,0.1);
  border-radius: 12rpx;
  padding: 24rpx;
  margin-right: 90rpx;
  &::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: -38rpx;
    right: 30rpx;
    border-width: 20rpx;
    border-style: solid;
    display: block;
    border-color: transparent transparent #ffffff transparent;
  }
  .x {
    img {
      width:25rpx;
      height:25rpx;
      top: 26rpx;
      right: 20rpx;
      position: absolute;
    }
  }
  .title {
    font-size: 30rpx;
  }
  .subtitle {
    margin-top: 18rpx;
    font-size: 24rpx;
    color:rgba(107,115,122,1);
  }
}
</style>